<template>
  <BaseCard title="今日机构情况">
    <div class="list">
      <div class="item" :key="index" v-for="(item, index) in list">
        <span class="label">{{ item.label }}</span>
        <span class="value">
          <BaseRollNum :number="item.value" />
          <span v-if="item.unit" class="unit">{{ item.unit }}</span>
        </span>
      </div>
    </div>
  </BaseCard>
</template>

<script>
import * as Ajax from '@/api/dashboard';
export default {
  data() {
    return {
      list: [
        { label: '进件成功量', value: 0 },
        { label: '进件成功率', value: 0, unit: '%' },
        { label: '在线机构数', value: 0 },
        { label: '曝光值低于500', value: 0 },
      ],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData(time) {
      Ajax.getPageInfo4(time).then(({ success, data }) => {
        if (success) {
          const { agencySuccessNum, agencySuccessRate, onlineAgencyNum, lowExposureNum } = data;
          this.list[0].value = agencySuccessNum || 0;
          this.list[1].value = agencySuccessRate || 0;
          this.list[2].value = onlineAgencyNum || 0;
          this.list[3].value = lowExposureNum || 0;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: calc(50% - 8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px;
    border-radius: 10px;

    &:nth-child(1) {
      color: rgb(253, 164, 31) !important;

      :deep(.num-2) {
        color: rgb(253, 164, 31) !important;
      }

      background-color: rgb(255, 243, 226);
      margin-right: 16px;
      margin-bottom: 10px;
    }

    &:nth-child(2) {
      color: rgb(55, 109, 247) !important;

      :deep(.num-2) {
        color: rgb(55, 109, 247) !important;
      }

      background-color: rgb(229, 236, 255);
      margin-bottom: 10px;
    }

    &:nth-child(3) {
      color: rgb(53, 205, 153) !important;

      :deep(.num-2) {
        color: rgb(53, 205, 153) !important;
      }

      background-color: rgb(233, 248, 243);
      margin-right: 16px;
    }

    &:nth-child(4) {
      color: rgb(237, 91, 91) !important;

      :deep(.num-2) {
        color: rgb(237, 91, 91) !important;
      }

      background-color: rgb(255, 234, 234);
    }
  }

  .label {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 4px;
  }

  .value {
    .unit {
      margin-left: 10px;
    }
  }

  :deep(.num-2) {
    font-size: 18px;
    font-weight: bold;
    color: #1890ff !important;
  }
}
</style>
